<template>
  <div class="recommand">
    <recommand-item>
      <div slot="left">
        <p class="left-top">{{font_left[0]}}</p>
        <p class="left-bottom">{{font_left[1]}}</p>
      </div>
      <div slot="bottom" class="bottom">
        <div class="bottom-item" v-for="(item,index) in recommandList" :key="index" @click="loadList(index)">
          <div class="pic">
            <img :src="item.picUrl == null ? item.coverImgUrl : item.picUrl" alt="">
            <p class="font">{{item.name}}</p>
          </div>
        </div>
      </div>
    </recommand-item>
  </div>
</template>

<script>
  import RecommandItem from "./RecommandItem";
    export default {
        name: "Recommand",
        components:{
            RecommandItem
        },
        data(){
          return{

          }
        },
        props:{
          font_left:{
              type:Array,
              default() {
                  return [];
              }
          },
            recommandList:{
              type: Array,
                default() {
                    return [];
                }
            }
        },
        methods:{
            loadList(index){
                // this.$router.push({path:'/find',params:{id:this.recommandList[index].id}})
                this.$router.push('/songlist/' + this.recommandList[index].id)
            },
        },
    }
</script>

<style scoped>

  .recommand{
    margin-top: 10px;
    width: 100%;
  }

  .left-top{
    width: 250px;
    margin-top: 5px;

    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 1; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }

  .left-bottom{
    width: 250px;
    font-size: 15px;
    font-weight: bolder;
    margin-top: 5px;

    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 1; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }

  .bottom{
    display: flex;
    margin-top: 10px;
    font-size: 10px;
    overflow: scroll;
  }

  .bottom::-webkit-scrollbar {
    display: none;
  }

  .bottom-item{
    flex: 1;
  }

  .pic img{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-right: 5px;
    margin-left: 5px;
  }

  .font{
    margin-left: 7px;
    margin-right: 7px;

    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 2; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }




</style>